<template>
    <div>
        <button @click="startDraw('Point')">绘制点</button>
        <button @click="startDraw('Marker')">绘制Marker</button>
        <button @click="startDraw('Polyline')">绘制线</button>
        <button @click="startDraw('Polygon')">绘制面</button>
        <button @click="startDraw('Rectangle')">绘制矩形</button>
        <button @click="startDraw('Circle')">绘制圆形</button>
        <button @click="clearDraw">清空绘制</button>
        <button @click="endDraw">结束绘制</button>

        <button @click="openGraticules()">经纬网</button>
        <button @click="openKilometerGrid()">公里网</button>
        <button @click="addTerrain()">开启地形</button>
        <button @click="removeTerrain()">移除地形</button>
        <button @click="addScene()">倾斜摄影</button>
        <button @click="removeScene()">移除倾斜摄影</button>
    </div>
</template>

<script>
export default {
    props: ['bindMap'],
    data() {
        return {
            Graticules: false,
            KilometerGrid: false,
        }
    },
    methods: {
        startDraw(type) {
            ;[window.bindMap2D, window.bindMap3D].forEach(mapVm => {
                mapVm.startDraw(type, {
                    linkMaps: [window.bindMap2D, window.bindMap3D],
                    repeatMode: true,
                    events: {
                        drawcreate: function (evt) {
                            console.log(evt.value)

                            // 绘制 LABEL
                            if (evt.value.type === 'Point') {
                                const bindMap =
                                    'dynamic' in evt.value
                                        ? window.bindMap3D
                                        : window.bindMap2D

                                bindMap.drawGraphic('Label', evt.coords[0], {
                                    text: '这是一段标签长-----\n这是一段标签\n短-----',
                                })
                            }
                        },
                    },
                })
            })
        },
        clearDraw() {
            ;[window.bindMap2D, window.bindMap3D].forEach(m => m.clearDraw())
        },
        endDraw() {
            ;[window.bindMap2D, window.bindMap3D].forEach(m => m.endDraw())
        },
        // 打开经纬网
        openGraticules() {
            this.Graticules = !this.Graticules
            ;[window.bindMap2D, window.bindMap3D].forEach(mapVm => {
                if (this.Graticules) {
                    mapVm.openGraticules(true, {
                        color: '#41e0e8',
                        fill: false,
                        'font-size': '12px',
                    })
                } else {
                    mapVm.closeGraticules()
                }
            })
        },
        // 打开公里网网
        openKilometerGrid() {
            this.KilometerGrid = !this.KilometerGrid
            ;[window.bindMap2D, window.bindMap3D].forEach(mapVm => {
                if (this.KilometerGrid) {
                    mapVm.openKilometerGrid(true, {
                        color: '#41e0e8',
                        fill: false,
                        'font-size': '12px',
                    })
                } else {
                    mapVm.closeKilometerGrid()
                }
            })
        },
        //三维 地形
        addTerrain() {
            window.bindMap3D.addTerrain(
                'http://172.16.3.228:8090/iserver/services/3D-local3DCache-qgdx/rest/realspace/datas/QGDX'
            )
        },
        // 移除地形
        removeTerrain() {
            window.bindMap3D.removeTerrain()
        },
        //三维 倾斜摄影URL
        addScene() {
            window.bindMap3D.addTilesLayer(
                '1',
                'http://www.supermapol.com/realspace/services/3D-jinjiang/rest/realspace/datas/jinjiang/config',
                {
                    //可见高度 单位米
                    visibleDistance: 200000,
                    //倾斜摄影抬高 单位米
                    bottomAltitude: 10,
                    toPosition: true,
                }
            )
        },
        removeScene() {
            window.bindMap3D.removeScene('1')
        },
    },
}
</script>
